<template>
  <d2-container>
    <page-header slot='header' @submit='handleSubmit' ref='header'></page-header>
    <demo-page-main
      :table-data='table'
      :loading='loading'/>
    <demo-page-footer
      slot="footer"
      :current="page.current"
      :size="page.size"
      :total="page.total"
      @change="handlePaginationChange"/>
  </d2-container>
</template>

<script>
import PageHeader from './components/PageHeader'
import DemoPageMain from './components/PageMain'
import DemoPageFooter from './components/PageFooter'
export default {
  name: 'customer-infolist',
  components: {
    DemoPageMain,
    PageHeader,
    DemoPageFooter
  },
  data () {
    return {
      table: [
        {
          id: 5,
          key: 0,
          name: '名称',
          sex: '男',
          IdCard: '121212121212121212',
          birthday: '1933.03.00',
          age: '18',
          tel: '1320000000',
          state: '0'
        },
        {
          id: 5,
          key: 0,
          name: '名称',
          sex: '男',
          IdCard: '121212121212121212',
          birthday: '1933.03.00',
          age: '18',
          tel: '1320000000',
          state: '0'
        }
      ],
      loading: false,
      page: {
        current: 1,
        size: 100,
        total: 0
      }
    }
  },
  methods: {
    handlePaginationChange (val) {
      this.$notify({
        title: '分页变化',
        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
      })
      this.page = val
      // nextTick 只是为了优化示例中 notify 的显示
      this.$nextTick(() => {
        this.$refs.header.handleFormSubmit()
      })
    },
    handleSubmit (form) {
      this.loading = true
      this.$notify({
        title: '开始请求模拟表格数据'
      })
      // BusinessTable1List({
      //   ...form,
      //   page: this.page
      // })
      //   .then(res => {
      //     this.loading = false
      //     this.$notify({
      //       title: '模拟表格数据请求完毕'
      //     })
      //     this.table = res.list
      //     this.page = res.page
      //   })
      //   .catch(err => {
      //     this.loading = false
      //     this.$notify({
      //       title: '模拟表格数据请求异常'
      //     })
      //     console.log('err', err)
      //   })
    }
  }
}
</script>
